import React, { Component } from 'react';
import {
  Modal,
  Table,
  Space,
  Form,
  Input,
  Button,
  Select,
  Popconfirm,
  message,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {
  _Grade,
  _Room,
  _subject,
  _Add,
  _del,
  _update,
} from '../../../api/grade';
import { FormInstance } from 'antd/lib/form';
import './index.less';
const { Option } = Select;
class Grade extends Component {
  state = {
    isModalVisible: false,
    isEdit: false,
    data: [],
    classroom: [],
    baner: [],
    value: { grade_name: '', room_id: '', subject_id: '' },
    Gid:'',

  };
  formRef = React.createRef<FormInstance>();
  componentDidMount() {
    this.getlist();
  }
  // 渲染数据页面
  getlist = async () => {
    let grade = await _Grade({
      grade_id: '',
      grade_name: '',
      room_id: '',
      room_text: '',
      subject_id: '',
      subject_text: '',
    });
    this.setState({
      data: grade.data.data,
    });

    // 教室号
    let room = await _Room({
      room_id: '',
      room_text: '',
    });
    this.setState({
      classroom: room.data.data,
    });

    // 课程名
    let subject = await _subject({
      subject_id: '',
      subject_text: '',
    });
    this.setState({
      baner: subject.data.data,
    });
  };
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });
  };
  onGenderChange = (value: string) => {
    console.log(value);
  };
  // 添加
  onFinish = async (values: any) => {
    let add = await _Add({
      grade_name: values.grade_name,
      room_id: values.room_text,
      subject_id: values.subject_text,
    });
    if (add.data.code == 1) {
      this.getlist();
    }
    this.setState({
      isModalVisible: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  onReset = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  onChange = (value: any) => {
    console.log(value);
  };
  // 删除及弹框
  confirm = async (item: any) => {
    let del = await _del({
      grade_id: item.grade_id,
    });
    if (del.data.code == 1) {
      this.getlist();
    }
    message.success('删除成功');
  };
  cancel = (e: any) => {
    console.log(e);
    message.error('已取消');
  };

  // 修改
  Update = async(item: any) => {
    console.log(item);
    
    this.setState({
      isEdit: true,
      value: item,
      Gid:item.grade_id
    });
  };
  // 修改遮罩层
  onEdser = () => {
    this.setState({
      isEdit: false,
      // value:{ grade_name: '', room_id: '', subject_id: '' }
    });
  };
  onFish = async(values: any) => {
    console.log(this.state.Gid);
    
    let update = await _update({
    grade_id:this.state.Gid,
	  grade_name:values.grade_name,
	  subject_id:values.subject_text,
	  room_id:values.room_text
    })
    if(update.data.code == 1){
      this.getlist()
    }
    this.setState({
      isEdit: false,
    });
  };
  hander = () => {
    this.setState({
      isEdit: false,
    });
  };

  render() {
    const { data, classroom, baner, value } = this.state;
    const columns = [
      {
        title: '班级名',
        dataIndex: 'grade_name',
      },
      {
        title: '课程名',
        dataIndex: 'subject_text',
      },
      {
        title: '教室号',
        dataIndex: 'room_text',
      },
      {
        title: '操作',
        render: (text: any) => (
          // console.log(text)

          <Space>
            <a onClick={() => this.Update(text)}>修改</a>
            <Popconfirm
              title="确定删除？"
              onConfirm={() => this.confirm(text)}
              onCancel={this.cancel}
              okText="确定"
              cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
        ),
      },
    ];
    return (
      <div className="grade">
        <Button type="primary" className="primary" onClick={this.showModal}>
          <PlusOutlined />
          添加班级
        </Button>
        <Modal
          title="添加班级"
          visible={this.state.isModalVisible}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Form ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
            <Form.Item
              name="grade_name"
              label="班级名"
              rules={[{ required: true, message: '班级名不能为空' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="room_text"
              label="教室号"
              rules={[{ required: true, message: '教室号不能为空' }]}
            >
              <Select onChange={this.onGenderChange}>
                {classroom.map((item: any) => {
                  return (
                    <Option value={item.room_id} key={item.room_id}>
                      {item.room_text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="subject_text"
              label="课程名"
              rules={[{ required: true, message: '课程名不能为空' }]}
            >
              <Select onChange={this.onGenderChange}>
                {baner.map((item: any) => {
                  return (
                    <Option value={item.subject_id} key={item.subject_id}>
                      {item.subject_text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item>
              <Button htmlType="button" onClick={this.onReset}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>

        {/* 修改弹框 */}
        <Modal
          title="修改班级"
          visible={this.state.isEdit}
          onCancel={this.hander}
          footer={null}
        >
          <Form
            ref={this.formRef}
            name="control-ref"
            onFinish={this.onFish}
            fields={[
              {
                name: ['grade_name'],
                value: value.grade_name,
              },
              {
                name: ['room_text'],
                value: value.room_id,
              },
              {
                name: ['subject_text'],
                value: value.subject_id,
              },
            ]}
          >
            <Form.Item
              name="grade_name"
              label="班级名"
              rules={[{ required: true }]}
            >
              <Input disabled />
            </Form.Item>
            <Form.Item
              name="room_text"
              label="教室号"
              rules={[{ required: true, message: '教室号不能为空' }]}
              initialValue={value.room_id}
            >
              <Select onChange={this.onGenderChange}>
                {classroom.map((item: any) => {
                  return (
                    <Option value={item.room_id} key={item.room_id}>
                      {item.room_text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="subject_text"
              label="课程名"
              rules={[{ required: true, message: '课程名不能为空' }]}
              initialValue={value.subject_id}
            >
              <Select onChange={this.onGenderChange}>
                {baner.map((item: any) => {
                  return (
                    <Option value={item.subject_id} key={item.subject_id}>
                      {item.subject_text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item>
              <Button htmlType="button" onClick={this.onEdser}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>
        <div className="table">
          <Table columns={columns} dataSource={data} rowKey="grade_id"></Table>
        </div>
      </div>
    );
  }
}

export default Grade;
